<template>
  <el-dialog
    class="public-dialog"
    :title="`${isEdit ? '修改' : '新增'}`"
    width="520"
    :close-on-click-modal="false"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <el-form
        ref="formRef"
        :model="formValues"
        :rules="rules"
        label-position="top"
        label-width="120px"
      >
        <el-form-item label="系统渠道" prop="sys_channel_id">
          <el-select
            v-model="formValues.sys_channel_id"
            placeholder="请选择"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in option['tcChannel']"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="跨境兴运渠道" prop="xy_ls_channel_id">
          <el-select
            v-model="formValues.xy_ls_channel_id"
            placeholder="请选择"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in option['xyChannel']"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="formValues.remark"
            :rows="2"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  option: { type: Object, default: () => ({}) },
});
import {
  bindXyChannelAdd,
  bindXyChannelEdit,
  bindXyChannelDetail,
} from "../api.js";
const { option } = toRefs(props);
const isEdit = computed(() => {
  return !!props.id;
});
const formRef = ref();
const formValues = ref({});
const loading = ref();
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const rules = reactive({
  sys_channel_id: [
    { required: true, message: "请选择系统渠道", trigger: "change" },
  ],
  xy_ls_channel_id: [
    { required: true, message: "请选择跨境兴运渠道", trigger: "change" },
  ],
});
watch(
  () => props.id,
  (val) => {
    if (val) {
      getDetail(val);
    }
  }
);
const getDetail = async (id) => {
  const { data } = await bindXyChannelDetail({ id });
  formValues.value = data;
};
const handleSave = async () => {
  try {
    formRef.value?.validate(async (valid) => {
      if (valid) {
        const { code, message } = await (isEdit.value
          ? bindXyChannelEdit
          : bindXyChannelAdd)(formValues.value);
        if (code !== 200) {
          ElMessage.error(message);
          return;
        }
        ElMessage.success(isEdit.value ? "修改成功" : "保存成功");
        handleClose(true);
      } else {
        return false;
      }
    });
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  formValues.value = {};
  await nextTick();
  formRef.value?.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
